<template>
	<a-spin dot :loading="loading">
		<a-watermark class="watermark" content="趣貓坞" grayscale>
			<a-page-header @back="back" :style="{ background: 'var(--color-bg-2)' }" title="任务详情">
			</a-page-header>
			<a-image width="100%" height="200px" fit="cover"
				src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp" />
			<view class="area-box">
				<block v-if="taskInfo.status === 0">
					<a-tag color="#f53f3f">进行中</a-tag>
				</block>
				<block v-if="taskInfo.status === -1">
					<a-tag color="gray">已结束</a-tag>
				</block>
				<a-typography-text bold :style="{fontSize: '16px',marginLeft: '10px' }">
					{{ taskInfo.name }}
				</a-typography-text>
				<view class="sub-box">
					<a-descriptions size="small" :data="infoData" :column="1" />
				</view>
				<a-typography-title :heading="5"
					style="font-weight: bolder;">任务参与({{ joinList.length }}人)</a-typography-title>
				<a-avatar-group :max-count="5">
					<block v-for="user in joinList" :key="user.id">
						<a-avatar :style="{ backgroundColor: '#165DFF' }">{{ user.name.substr(0,1) }}</a-avatar>
					</block>
				</a-avatar-group>
				<a-typography-title :heading="5" style="font-weight: bolder;">任务详情</a-typography-title>
				<rich-text :nodes="taskInfo.detail"></rich-text>
				<a-button :style="{ marginTop: '40px',height: '44px' }" type="primary" long
					@click="join">
					<template #icon>
						<icon-check-circle />
					</template>
					参与任务</a-button>
			</view>
		</a-watermark>
	</a-spin>
</template>

<script setup>
	import TaskApi from '@/Api.js'
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const loading = ref(true);
	const joined = ref(false);
	const taskInfo = ref({})
	const infoData = ref([])
	const joinList = ref([])

	onLoad((options) => {
		const id = options.id || 0
		info(id)
	})

	const info = (id) => {
		TaskApi.GetTask(id).then(res => {
			taskInfo.value = res.data.info
			joined.value = res.data.joined
			joinList.value = res.data.joinList
			infoData.value = [{
				label: '征集时间',
				value: taskInfo.value.startAt + '~' + taskInfo.value.endAt,
			}, {
				label: '征集方式',
				value: taskInfo.value.method,
			}, {
				label: '征集数量',
				value: taskInfo.value.number,
			}, {
				label: '已征集',
				value: joinList.value.length,
			}]
			loading.value = false
		})
	}

	const back = () => {
		history.back()
	}

	const join = () => {
		uni.navigateTo({
			url: '/pages/Join?id=' + taskInfo.value.id
		})
	}
</script>

<style scoped lang="scss">
	.watermark {
		background: var(--color-bg-2);
	}

	.area-box {
		padding: 20px;
	}

	.sub-box {
		padding: 20px;
		background: var(--color-neutral-2);
		margin: 20px 0;
	}
</style>